<template>
    <div class="home">
      <head :title="locale" :back="false">
        <div slot="left" @click="toggleSidebar">
          <image style="width: 36px;height: 30px" :src="`root:img/${theme}/my/sidebar@2x.png`"></image>
        </div>
        <!-- <div class="title" slot="title">
          <image style="width: 38px;height: 38px" src="root:img/home/search-icon@2x.png"></image>
        </div> -->
        <!-- <div slot="right" style="width: 36;height: 36">
          <image style="width: 36px;height: 36px" src="root:img/home/search-icon@2x.png"></image>
        </div> -->
      </head>
      <scroller class="container" :show-scrollbar="false">
        <!-- banner区域 -->
        <wxc-ep-slider
            :slider-id="sliderId"
            :card-length='cardLength'
            :card-s="cardSize"
            :select-index="1"
            >
            <div v-for="(img,key) of imageList" :key="key" class="slider-item" :slot="`card${key}_${sliderId}`">
              <image style="width:650px;height:320px;border-radius:20px;" resize="cover" :src="img.picUrl"></image>
            </div>
        </wxc-ep-slider>
        <!-- 快讯 -->
        <div class="kx"  @click="toLang">
          <div class="kx-title">
            <image style="width:88px;height:28px;" src="root:img/home/kauixun@2x.png"></image>
            <text class="kx-title-con">你的收付款额度超过限额(1万/笔、5万/笔)</text>
          </div>
          <div class="kx-line"></div>
          <div class="kx-content">
            <div class="kx-item" v-for="item of kxList" :key="item">
              <div >
              <text class="kx-item-label">BTC/USDT</text>
              </div>
              <div >
                <text class="kx-item-value">3624.96</text>
              </div>
              <div >
                <text class="kx-item-rate">-0.18%</text>
              </div>
              <div >
                <text class="kx-item-equal">≈24555.90 CNY</text>
              </div>
            </div>
          </div>
          <div class="kx-tab">
            <image style="width:38px;height:10px;" resize="contain" src="root:img/home/yuan2@2x.png"></image>
            <image style="width:38px;height:10px;" resize="contain" src="root:img/home/yuan3@2x.png"></image>
          </div>
        </div>
        <!-- 新手引导 -->
        <div class="bgf" @click="toSideBar">
            <div class="novice">
              <div class="novice-title">
                <image style="width:44px;height:32px;" src="root:img/home/biaoti@2x.png"></image>
                <text class="novice-title-text">{{$t('home.hand')}}</text>
              </div>
              <div class="nv-con">
                <div class="nv-item nv-bg1">
                    <image style="width:338px;height:166px;position:absolute;" resize="stretch" src="root:img/home/newh1@2x.png"></image>
                    <div class="nv-item-label">
                      <text class="nv-item-label-text1">{{$t('home.oneMinute')}}</text>
                      <text class="nv-item-label-text2">{{$t('home.getStrated')}}</text>
                    </div>
                </div>
                <div class="nv-item nv-bg2">
                    <image style="width:338px;height:166px;position:absolute;" resize="stretch"  src="root:img/home/newh2@2x.png"></image>
                    <div class="nv-item-label">
                      <text class="nv-item-label-text1">{{$t('home.raider')}}</text>
                      <text class="nv-item-label-text2">{{$t('home.getStrated')}}</text>
                    </div>
                </div>
              </div>
            </div>
        </div>
        <!-- 功能服务 -->
        <div class="service">
          <div class="novice-title">
            <image style="width:44px;height:32px;" src="root:img/home/biaoti@2x.png"></image>
            <text class="novice-title-text">{{$t('home.service')}}</text>
          </div>
          <div class="service-con">
            <div class="service-item">
              <image style="width:50px;height:50px" src="https://witparking-1258564597.cos.ap-beijing.myqcloud.com/assets/homepage_icon_stall%402x.png"></image>
              <div class="service-item-dec">
                <div >
                  <text class="service-item-label">公司服务一</text>
                </div>
                <div ><text class="service-item-sub">服务的项目简短文字介绍</text></div>
              </div>
              <image class="arrow_right" style="width:18px;height:32px"  src="root:img/home/right@2x.png"></image>
            </div>
            <div class="service-item">
              <image style="width:50px;height:50px" src="https://witparking-1258564597.cos.ap-beijing.myqcloud.com/assets/homepage_icon_stall%402x.png"></image>
              <div class="service-item-dec">
                <div >
                  <text class="service-item-label">公司服务一</text>
                </div>
                <div ><text class="service-item-sub">服务的项目简短文字介绍</text></div>
              </div>
              <image class="arrow_right" style="width:18px;height:32px" src="root:img/home/right@2x.png"></image>
            </div>
            <div class="service-item">
              <image style="width:50px;height:50px" src="https://witparking-1258564597.cos.ap-beijing.myqcloud.com/assets/homepage_icon_stall%402x.png"></image>
              <div class="service-item-dec">
                <div >
                  <text class="service-item-label">公司服务一</text>
                </div>
                <div ><text class="service-item-sub">服务的项目简短文字介绍</text></div>
              </div>
              <image class="arrow_right" style="width:18px;height:32px"  src="root:img/home/right@2x.png"></image>
            </div>
          </div>
        </div>
        <!-- 涨幅榜 -->
        <div class="bgf">
          <div class="zf">
            <div class="novice-title">
              <image style="width:44px;height:32px;" src="root:img/home/biaoti@2x.png"></image>
              <text class="novice-title-text">{{$t('home.gain')}}</text>
            </div>
            <div class="zf-line"></div>
            <div class="zf-item" v-for="item of [1,2,3,4,5]" :key="item">
                <div class="zf-range">
                  <image v-if="item<=3" style="width:32px;height:20px;" :src="getzfImg(item)"></image>
                  <text class="zf-range-text" :class="[{'zf-first':item === 1},{'zf-third':item === 2}]">{{item}}</text>
                </div>
                <div class="zf-item-dec">
                  <text class="zf-item-lab">BTC/USDT</text>
                  <text class="zf-item-sub">5345.00</text>
                </div>
                <div class="zf-item-dec">
                  <text class="zf-item-lab">$0.97860000</text>
                  <text class="zf-item-sub">￥5345.00000000</text>
                </div>
                <div class="zf-btn-rate">
                  <text class="zf-btn-count">+7.012%</text>
                </div>
                <div class="kx-line posa"></div>
          </div>
          
          </div>
        </div>
      </scroller>
    </div>
</template>

<script>
import {
  WxcMinibar, WxcEpSlider
} from 'weex-ui'
// const net = require('../../utils/http.js')
export default {
  name: 'home',
  data () {
    return {
      sliderId: 1,
      cardLength: 3,
      cardSize: {
        width: 650,
        height: 320,
        spacing: 0,
        scale: .9
      },
      imageList: [
      ],
      kxList: [1, 2, 3],
      url:'',

    }
  },
  components: {WxcMinibar, WxcEpSlider},
  computed: {},
  watch: {},
  created () {
    this.get_banners()
    this.get_quick_news()
  },
  mounted () {},
  methods: {
    // 获取banner图
    get_banners(){
      net.postSilent('index/listBanner',{},(res)=>{
         this.imageList = res.list
         this.cardLength = this.imageList.length
      })
    },
    // 获取快讯
    get_quick_news(){
      net.postSilent('index/listAFlash',{},(res)=>{
        // this.url = res
      })
    },
    toLang(){
      // let nav=weex.requireModule('navigator')
      // nav.push('root:pages/home/lang.js')
    },
    toSideBar(){
      // let nav=weex.requireModule('navigator')
      // nav.push('root:pages/layout.js')
    },
    getzfImg(i){
      if(i>3){
        return 'root:img/home/2@2x.png'
      }else {
        return `root:img/home/${i}@2x.png`
      }
    },
    toggleSidebar(){
      // this.$refs.sidebar.expandWithAnimation()
    }
  }
}
</script>
<style  scoped>
.home{
  flex: 1;
  /* background-color: #cccccc; */
  /* position: absolute;
  top: 0;
  bottom: 0; */
}
.slider-item{
  width: 650px;
  height: 330px;
  background-color:rgba(70,120,245,0.23);
  border-radius: 20px;
  align-items: center;
  justify-content: center;
}
.kx{
  margin-left: 30px;
  width: 690px;
  /* height: 304px; */
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kx-title{
  width: 669px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 23;

}
.kx-title-con{
  width: 529px;
  opacity: 1;
  font-size: 30px;
  font-family: PingFang SC;
  color: rgba(51,51,51,1);
  letter-spacing: 0px;
  lines:1;
}
.kx-line{
  width: 690px;
  height: 1px;
  background-color: rgba(233, 233, 233, 1)
}
.kx-content{
  margin-top: 54px;
  width: 690px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.kx-item{
  width: 154px;
  height: 140px;
  display: flex;
  flex-direction: column;
}
.kx-item-label{
  width: 154px;
  text-align: center;
  font-size: 24px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(60,71,98,1);
}
.kx-item-value{
  margin-top: 10px;
  margin-bottom: 8px;
  width: 154px;
  opacity: 1;
  font-size: 28px;
  font-family: PingFang SC;
  color: rgba(237,91,20,1);
  letter-spacing: 0px;
   text-align: center;
}
.kx-item-rate{
  font-size: 20px;
  color:rgb(237, 91, 20);
  text-align: center;
   margin-bottom: 10px;
}
.kx-item-equal{
  width: 154px;
  font-size:16px;
  color: rgb(154, 156, 164);
  text-align: center;
  letter-spacing: 0px;
  font-family: PingFang SC;
}
.kx-tab{
  width: 690px;
  height: 76px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  border: 1px;
  border-style: solid;
  border-color: rgba(70,120,245,1);
}
.novice{
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  width: 750px;
  height: 292px;
  background-color: #ffffff;
}
.bgf{
  padding-top:30px;
  padding-bottom:30px;
  background-color: #f5f6fa;
}
.novice-title{
  flex:1;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-bottom: 30px;
}
.novice-title-text{
  font-size: 38px;
  color: rgb(51, 51, 51);
  font-family: PingFang SC;

}
.nv-con{
  width: 690px;
  height: 166px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.nv-item{
  width: 338px;
  height: 166px;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.nv-bg1{
  background: linear-gradient(left,rgba(101,114,157,1), rgba(101,114,157,1));
}
.nv-bg2{
  background: linear-gradient(left,rgba(116,97,160,1), rgba(116,97,160,1));
}
.nv-item-label{
  margin-left: 30px;
}
.nv-item-label-text1{
  font-size: 40px;
  color: #ffffff;
}
.nv-item-label-text2{
  font-size: 24px;
  color: rgba(217,226,255,1);
}
.service{
  width: 750px;
  padding-top: 30px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  background-color: #ffffff;
}

.service-item{
  width: 690px;
  height: 64px;
  display: flex;
  flex-direction: row;
  flex: 1;
  align-items: center;
  margin-top: 38px;
  margin-bottom:38px;
}
.service-item-dec{
  margin-left: 20px;
}
.service-item-label{
  font-size: 30px;
  font-weight: Semibold;
  color: rgb(60,71,98);
}
.service-item-sub{
  font-size: 24px;
  color: rgba(154,156,164,1);
}
.arrow_right{
      position: absolute;
      right: 0;
}
.zf{
  width: 750px;
  height: 866px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
  background-color: #ffffff;
}
.zf-line{
  position: absolute;
  left: 0;
  top: 100px;
  width: 750px;
  border-bottom-width: 1px ;
  border-bottom-style: solid;
  border-bottom-color: #e9e9e9;
}
.zf-item{
  width: 690px;
  height: 62px;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 38px;
  margin-bottom: 40px;
}
.zf-item-dec{
  width: 220px;
}
.zf-item-lab{
  font-size: 28px;
  color: rgb(60,71,98);
}
.zf-item-sub{
  font-size: 24px;
  color: rgba(154,156,164,1);
}
.zf-btn-rate{
  width: 165px;
  height: 60px;
  background-color: rgba(44,177,156,1);
  border-radius: 8px;
  position: absolute;
  right: 0;
}
.zf-btn-count{
  color: #ffffff;
  font-size: 28px;
  text-align: center;
  line-height: 60px;
}
.posa{
  position: absolute;
  bottom: -30px;
  left: 0;
}
.zf-range{
  margin-right:30px;
}
.zf-first{
  color: rgb(254,153,44);
}
.zf-third{

}
.zf-range-text{
  width: 32px;
  text-align: center;
  opacity: 1;
  font-size: 36px;
  font-family: PingFang SC;
  font-style: italic;
  color: rgba(102,102,102,1);
  line-height: 36px;
  letter-spacing: 0px;
}
</style>
